<!--  -->
<template>
  <div class="tables-system-type-1">
    <el-row v-loading="systemItemLoading">
      <el-table :data="systemItemList" :height="340" :border="true" style="width: 100%">
        <el-table-column label="序号" width="60" align="center">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="repertoryQuote" label="图片" width="120" align="center" class="padding0">
          <template slot-scope="scope">
            <div class="scope-image">
              <a :href="imageUrl(scope.row)" target="_blank"
                v-if="scope.row && scope.row.repertoryQuote && scope.row.repertoryQuote.hrepertory">有图片</a>
              <span v-else>没有图片</span>
              <div v-if="scope.row && scope.row.repertoryQuote && scope.row.repertoryQuote.hrepertory" class="img">
                <div class="r-image">
                  <el-image :src="imageUrl(scope.row)" :fit="'contain'"></el-image>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="分类" width="140">
          <template slot-scope="scope">
            <span
              v-if="scope.row.categoryQuote && scope.row.categoryQuote.scategories &&  scope.row.categoryQuote.scategories.name">{{scope.row.categoryQuote.scategories.name}}</span>
            <span v-else style="color: #b5b5b5;">{{'未定义'}}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="sarticle.title" label="标题">
        </el-table-column>
        <!-- <el-table-column type="selection" width="55">
        </el-table-column> -->
      </el-table>
    </el-row>
  </div>
</template>

<script>
import ImagesEmpty from '@/assets/images/image-empty.png'
import * as functions from '@/core/functions.js'
export default {
  props: {
    systemItemList: {
      type: Array
    },
    systemItemLoading: {
      type: Boolean
    }
  },
  data () {
    return {
    }
  },
  methods: {
    imageUrl (row) {
      if (!row || !row.repertoryQuote || !row.repertoryQuote.hrepertory) {
        return ImagesEmpty
      }
      let src = functions.getRepertoryImageSrcByHostRepertory(row.repertoryQuote.hrepertory)
      return src
    }
  }
}

</script>

<style scoped lang="scss">
.tables-system-type-1 {
  margin-top: 10px;

  .img {
    display: none;
    position: absolute;
    z-index: 1999;
    width: 0px;

    .r-image {
      position: relative;
      left: 110px;
      top: -36px;
      width: 120px;
    }
  }
}
.scope-image:hover .img {
  display: inherit;
}
</style>
